$(function () {
  const { form, layer } = layui;
  // 1.1 获取裁剪区域的 DOM 元素
  var $image = $("#image");
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".img-preview"
  };

  // 1.3 创建裁剪区域
  $image.cropper(options);

  $("#file").change(function (e) {
    //   console.log(e.target.files);

    const files = e.target.files;

    if (files.length === 0) return layer.msg("请选择图片");

    const filesImg = files[0];

    const imgUrl = URL.createObjectURL(filesImg);

    console.log(imgUrl);
    
    $image.cropper("destroy").attr("src", imgUrl).cropper(options);

    
  });

  $("#img-load").click(function (e) {
    e.preventDefault();
    $("#file").click();
  });

  $("#img-loaded").click(function (e) {
    e.preventDefault();
    
    var dataURL = $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png')

    $.ajax({
        method : 'POST',
        url : '/my/update/avatar',
        data : {
            avatar : dataURL
        },
        success : function(res){
           console.log(res);

           if(res.status !== 0) return layer.msg('头像更换失败，请重试')

           layer.msg('更换头像成功！')
           window.parent.getInfo()
           
        }
    })
  });
});
